<template>
    <div class="userdata">
        <MyTitle title="用户分析"></MyTitle>
        <el-row class="homerow">
            <el-col :span="11" class="homecol" v-if="option">
                <EchartMap :option="option"></EchartMap>
            </el-col>
            <el-col :span="11" class="homecol" v-if="option1">
                <EchartMap :option="option1"></EchartMap>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { Http } from '../../api/api';
import { RoleFace } from '../../utils/types';
import EchartMap from '../Home/EchartMap.vue'


const option = ref<any>(null)
let option1 = reactive<any>(null)

const options = reactive({
    option1: {},
    option2: {},
})


const getOptionData = async () => {
    const res1 = await Http.getuserlist({
        all: true
    }) as any
    const res2 = await Http.getrolelist() as any


    const data: any = [];
    const xlist: any = []
    const ylist: any = []
    res2.result.forEach((item: RoleFace) => {
        data.push({
            name: item.label,
            value: res1.result.filter((v: any) => v.role == item.value).length
        })
        xlist.push(item.label)
        ylist.push(res1.result.filter((v: any) => v.role == item.value).length)
    })


    option.value = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data,
            }
        ]
    };

    option1 = {
        xAxis: {
            type: 'category',
            data: xlist
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: ylist,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };
}

onMounted(() => {
    getOptionData()
})


</script>


<style lang="scss" scoped>
.homerow {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-bottom: 10px;

    .homecol {
        height: 400px;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 10px;

        .chartbox {
            width: 100%;
            height: 100%;
        }
    }
}
</style>